<template>
  <div id="china_map_box">
    <div id="china_map"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //echart 配制option
      options: {
        // 提示框组件
        tooltip: {
          triggerOn: "mousemove", //mousemove、click
          padding: 8,
          borderWidth: 1,
          borderColor: "#F4B5B1",
          backgroundColor: "rgba(255,255,255,0.7)",
          textStyle: {
            color: "#000000",
            fontSize: 13,
          },
          //   提示框浮层内容格式器
          formatter: function (params) {
            let data = params.data;
            let context = `
              <div style="width: 220px; padding: 0 20px;">
                <p class="tooltip_style">
                  <span class="tooltip_left">省份</span>
                  <span class="tooltip_right">${data.name}</span>
                </p>
                <p class="tooltip_style">
                  <span class="tooltip_left">商家数</span>
                  <span class="tooltip_right">${data.value}家</span>
                </p>
                <p class="tooltip_style">
                  <span class="tooltip_left">商家数行业占比</span>
                  <span class="tooltip_right">0.50%</span>
                </p>
                <p class="tooltip_style">
                  <span class="tooltip_left">交易商家数行业占比</span>
                  <span class="tooltip_right">0.50%</span>
                </p>
              </div>
            `;
            return context;
          },
        },
        // 视觉映射组件，用于视觉编码，将数据映射到视觉元素
        visualMap: {
          align: "left", //设置图例位置
          type: "piecewise", // 类型为分段型
          show: true,
          right: "right",
          bottom: "center",
          showLabel: true, //显示图例文本
          itemWidth: 55, //图例宽度
          itemHeight: 20, //图例高度
          pieces: [
            {
              gte: 399, //大于等于
              lt: 500, //小于
              label: "商家数399 - 500",
              color: "#9C3D36",
            },
            {
              gte: 300,
              lt: 399,
              label: "商家数300 - 399",
              color: "#D7453B",
            },
            {
              gte: 200,
              lt: 299,
              label: "商家数200 - 299",
              color: "#A46A6A",
            },
            {
              gte: 100,
              lt: 199,
              label: "商家数100 - 199",
              color: "#D29898",
            },
            {
              gte: 1,
              lt: 99,
              label: "商家数1 - 99",
              color: "#E5E5E5",
            },
          ],
        },
        // 地理坐标系组件
        geo: {
          map: "china",
          // 地图上的文本样式设置
          label: {
            normal: {
              show: false,
              fontSize: "0",
              color: "rgba(0,0,0,0.9)",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.3)", //地图边界线边框颜色设置
            },
            // 鼠标移入地图位置效果
            emphasis: {
              areaColor: "#f2d5ad",
            },
          },
        },
        series: [
          {
            type: "map",
            geoIndex: 0,
            data: [],
          },
        ],
      },
      //echart data
      dataList: [
        {
          name: "南海诸岛",
          value: 100,
        },
        {
          name: "北京",
          value: 540,
        },
        {
          name: "天津",
          value: 130,
        },
        {
          name: "上海",
          value: 400,
        },
        {
          name: "重庆",
          value: 750,
        },
        {
          name: "河北",
          value: 130,
        },
        {
          name: "河南",
          value: 830,
        },
        {
          name: "云南",
          value: 110,
        },
        {
          name: "辽宁",
          value: 19,
        },
        {
          name: "黑龙江",
          value: 150,
        },
        {
          name: "湖南",
          value: 690,
        },
        {
          name: "安徽",
          value: 60,
        },
        {
          name: "山东",
          value: 39,
        },
        {
          name: "新疆",
          value: 499,
        },
        {
          name: "江苏",
          value: 31,
        },
        {
          name: "浙江",
          value: 104,
        },
        {
          name: "江西",
          value: 36,
        },
        {
          name: "湖北",
          value: 52,
        },
        {
          name: "广西",
          value: 33,
        },
        {
          name: "甘肃",
          value: 17,
        },
        {
          name: "山西",
          value: 5,
        },
        {
          name: "内蒙古",
          value: 450,
        },
        {
          name: "陕西",
          value: 22,
        },
        {
          name: "吉林",
          value: 4,
        },
        {
          name: "福建",
          value: 18,
        },
        {
          name: "贵州",
          value: 5,
        },
        {
          name: "广东",
          value: 98,
        },
        {
          name: "青海",
          value: 100,
        },
        {
          name: "西藏",
          value: 200,
        },
        {
          name: "四川",
          value: 44,
        },
        {
          name: "宁夏",
          value: 4,
        },
        {
          name: "海南",
          value: 22,
        },
        {
          name: "台湾",
          value: 3,
        },
        {
          name: "香港",
          value: 5,
        },
        {
          name: "澳门",
          value: 555,
        },
      ],
    };
  },
  methods: {
    //初始化中国地图
    initEchartMap() {
      let mapDiv = document.getElementById("china_map");
      let myChart = this.$echarts.init(mapDiv);
      myChart.setOption(this.options);
    },
    //修改echart配制
    setEchartOption() {
      this.options.series[0]["data"] = this.dataList;
    },
  },
  created() {
    this.setEchartOption();
  },
  mounted() {
    this.$nextTick(() => {
      this.initEchartMap();
    });
  },
};
</script>

<style scoped>
#china_map_box {
  width: 100%;
  height: 100%;
}
#china_map_box #china_map {
  height: 800px;
}
</style>
<style>
#china_map .tooltip_style {
  line-height: 1.7;
  overflow: hidden;
}
#china_map .tooltip_left {
  float: left;
}
#china_map .tooltip_right {
  float: right;
}
</style>
